<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="天地图"/>
    <title>天地图－地图API－范例－图片覆盖物类</title>
    <style>html,body{margin:0;padding:0}</style>
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=95f0a5688ec713adb3dd1735533f6fcb"></script>
    <script src="./ImageOverlay.js"></script>
    <script src="./d3.js"></script>
    <script src="./D3Overlay.js"></script>
    <script>
    var zoom = 11;

    var countries = [];
    var countriesOverlay = new T.D3Overlay(init, redraw);
    function init(sel, transform) {
        var upd = sel.selectAll('path.geojson').data(countries);
        upd.enter()
        .append('path')
        .attr("class", "geojson")
        .attr('stroke', 'black')
        .attr('fill', function (d, i) {
            return d3.hsl(Math.random() * 360, 0.9, 0.5)
        })
        .attr('fill-opacity', '0.1');
    }
    function redraw(sel, transform) {
        sel.selectAll('path.geojson').each(
            function (d, i) {
                d3.select(this).attr('d', transform.pathFromGeojson);
            }
        )
    }
    function onLoad() {
        // 添加地图
        var map = new T.Map('mapDiv', {
            center: new T.LngLat(106.76992, 25.97901),
            zoom,
            minZoom: 10,
            maxZoom: 18,
            maxBounds: new T.LngLatBounds(new T.LngLat(107.10709, 26.32419), new T.LngLat(106.36963, 25.66381))
        });

        window.fang = function() {
            console.log("=======", map.getBounds());
        }

        // 添加2.5D图层
        var bounds = [[108.08762, 26.64378], [105.4509, 25.31051]];
        var img = new T.ImageOverlay("./back.png", bounds, {opacity: 1});
        map.addOverLay(img);

        d3.json("./huishui.json", function (data) {
            countries = data.features;
            map.addOverLay(countriesOverlay);
            countriesOverlay.bringToBack();
        });
    }
    </script>
</head>
<body onLoad="onLoad()">
    <div id="mapDiv" style="position:absolute;width:100%; height:100%"></div>
</body>
</html>
